<template>
  <!-- <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div> -->
  <div ref="elRef" :style="styles"></div>
</template>

<script setup lang="ts">
import echarts from "@/app/appcommon/plugins/echarts";
import { cloneDeep, debounce } from "lodash-es";
// import 'echarts-wordcloud'
// import { propTypes } from '@/utils/propTypes'
import {
  computed,
  ref,
  unref,
  watch,
  onMounted,
  onBeforeUnmount,
  onActivated,
} from "vue";
// import { useAppStore } from "@/store/app";
import { isString } from "@/utils/validate";
import { ECharts } from "echarts/core";
import { INIT_OPTIONS } from "./const";

// import { useDesign } from '@/hooks/web/useDesign'

// const { getPrefixCls, variables } = useDesign()

// const prefixCls = getPrefixCls("echart");

// const appStore = useAppStore();
const emits = defineEmits(["click","clear"]);
const props = defineProps({
  options: {
    type: Object,
    required: true,
  },

  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "500px",
  },
  counter: {
    type: Number,
    default: 0,
  },

});

// const isDark = computed(() => appStore.getIsDark);

// const theme = computed(() => {
//   const echartTheme = unref(isDark) ? true : "auto";
//   return echartTheme;
// });

const options = computed(() => {
  return Object.assign(props.options, {
    // darkMode: unref(theme),
  });
});

const elRef = ref();

let echartRef: ECharts | null = null;

// const contentEl = ref();

const styles = computed(() => {
  const width = isString(props.width) ? props.width : `${props.width}px`;
  const height = isString(props.height) ? props.height : `${props.height}px`;

  return {
    width,
    height,
  };
});

const initChart = () => {
  if (unref(elRef) && props.options) {
    echartRef = echarts.init(unref(elRef));
    echartRef?.setOption(unref(options));
  }
};

watch(
  () => options.value,
  (options) => {
    if (echartRef) {
      echartRef?.setOption(options);
    }
  },
  {
    deep: true,
  }
);

watch([() => props.counter], () => {
  // console.log({counter:props.counter})
  echartRef?.setOption(cloneDeep(INIT_OPTIONS), {
    notMerge: true, // 如果notMerge = false, 会出现不更新的状态
    lazyUpdate: false,
    silent: false,
  });
  // echartRef?.clear()
});

const resizeHandler = debounce(() => {
  if (echartRef) {
    echartRef.resize();
  }
}, 100);

// const contentResizeHandler = async (e) => {
//   if (e.propertyName === "width") {
//     resizeHandler();
//   }
// };
const itemClick = (param:any) => {
  // console.log("JMDBG: itemClick inside Echart", param);
  emits("click", param);
};

onMounted(() => {
  initChart();
  if (echartRef) {
    echartRef.on("click", itemClick);
    window.addEventListener("resize", resizeHandler);
  }
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
  // unref(contentEl) &&
  //   (unref(contentEl) ).removeEventListener('transitionend', contentResizeHandler)
});

onActivated(() => {
  if (echartRef) {
    echartRef.resize();
  }
});
</script>
